import * as React from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/context';
import { tuple } from '../_util/type';

const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
export type ButtonType = typeof ButtonTypes[number];
const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
export type ButtonHTMLType = typeof ButtonHTMLTypes[number];

export interface BaseButtonProps {
  type?: ButtonType;
  children?: React.ReactNode;
}

export type AnchorButtonProps = BaseButtonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'>

export type NativeButtonProps = { htmlType?: ButtonHTMLType } & BaseButtonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>

export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;

const InternalButton: React.FC<ButtonProps> = (props) => {
  const {
    type,
    htmlType = 'button' as ButtonProps['htmlType'],
    children,
    className,
    ...rest } = props;
  const kids = children;
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('btn');
  const classes = classNames(
    prefixCls,
    {
      [`${prefixCls}-${type}`]: type
    },
    className,
  );
  const linkButtonRestProps = rest;
  if (linkButtonRestProps.href !== undefined) {
    return (
      <a 
       className={classes}
       {...linkButtonRestProps} >
        {kids}
      </a>
    );
  }
  const buttonNode = (
    <button
      {...(rest as NativeButtonProps)}
      type={htmlType}
      className={classes}
    >
      {kids}
    </button>
  );
  return buttonNode;
}
export default InternalButton;